<template>
  <div>
    <ul v-if="isInfoVisible">
      <li>
        <img :src="avatarSrc" alt="Avatar" class="touxiang" @click="triggerFileInput">
      </li>
      <li v-if="!isEditing">姓名: {{ name }}</li>
      <li v-else><input v-model="name"></li>
      <li v-if="!isEditing">学号: {{ studentId }}</li>
      <li v-else><input v-model="studentId"></li>
      <li v-if="!isEditing">寝室: {{ dorm }}</li>
      <li v-else><input v-model="dorm"></li>
      <li v-if="!isEditing">成绩: {{ grades }}</li>
      <li v-else><input v-model="grades"></li>
      <li v-if="!isEditing">学院: {{ college }}</li>
      <li v-else><input v-model="college"></li>
      <li v-if="!isEditing">班级: {{ oclass }}</li>
      <li v-else><input v-model="oclass"></li>
      <li v-if="!isEditing">身份证: {{ idCard }}</li>
      <li v-else><input v-model="idCard"></li>
      <li v-if="!isEditing">家庭住址: {{ address }}</li>
      <li v-else><input v-model="address"></li>
    </ul>
    <button @click="editInfo">编辑</button>
    <button @click="saveInfo" v-if="isEditing">保存</button>
    <input type="file" ref="fileInput" @change="onFileChange" accept="image/*" style="display: none;">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isInfoVisible: true,
      isEditing: false,
      searchQuery: '',
      name: '沈琦昌',
      studentId: '21547575',
      dorm: '2-607',
      grades: '70',
      college: '信息工程',
      oclass: '****',
      idCard: '********',
      address: '******************',
      avatarSrc: '../../static/touxiang/2.jpg' 
    };
  },
  methods: {
    editInfo() {
      this.isEditing = true;
    },
    saveInfo() {
      this.isEditing = false;
      localStorage.setItem('userInfo', JSON.stringify({
        name: this.name,
        studentId: this.studentId,
        dorm: this.dorm,
        grades: this.grades,
        college: this.college,
        oclass: this.oclass,
        idCard: this.idCard,
        address: this.address,
        avatarSrc: this.avatarSrc
      }));
    },
    onFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.avatarSrc = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    }
  },
  mounted() {
    const storedUserInfo = localStorage.getItem('userInfo');
    if (storedUserInfo) {
      const userInfo = JSON.parse(storedUserInfo);
      this.name = userInfo.name || '无';
      this.studentId = userInfo.studentId || '无';
      this.dorm = userInfo.dorm || '无';
      this.grades = userInfo.grades || '无';
      this.college = userInfo.college || '无';
      this.oclass = userInfo.oclass || '无';
      this.idCard = userInfo.idCard || '无';
      this.address = userInfo.address || '无';
      this.avatarSrc = userInfo.avatarSrc || '';
    }
  }
};
</script>

<style scoped>
.touxiang {
  width: 150px;
  height: 150px;
  background-color: black;
  cursor: pointer; 
}
ul {
  list-style-type: none;
  text-align: left;
}
</style>
